<template>
<form action="/" @keydown.enter="onClickButton">
    <van-search 
    v-model="value"
    show-action 
    placeholder="请输入搜索关键词" 
   
    @cancel="onCancel">
    <template #action>
        <div @click="onClickButton" >搜索</div>
    </template></van-search>
    <!-- 热门搜索 -->
    <div>
        <van-divider :style="{ color: '#1989fa', borderColor: 'blue', padding: '0 16px' }">
            热门搜索
        </van-divider>
        <van-tag round type="primary" size="large" v-for="item of hotlist" :key="item.wordid">{{ item.keyword }}</van-tag>
    </div>
    <van-list  finished-text="没有更多了">
        <GoodsList :goodslist="goodslist"></GoodsList>
    </van-list>

</form>

<van-list>
    <GoodsList :goodslist="goodslist"></GoodsList>
</van-list>
<HomeFooter />
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import { Toast } from 'vant';
import { proSearch, proHotword } from '@/apis/home'
import HomeFooter from '@/components/HomeFooter.vue'
const value = ref('');
const goodslist = ref([])
const onClickButton = () => {
    proSearch(1,value.value)
        .then(res => {
            console.log(res)
            goodslist.value = res.data
        })

}

const onCancel = () => {

}
//热门搜索
const hotlist = ref([])
const gethotlist = () => {
    proHotword()
        .then(res => {
            hotlist.value = res.data
        })
}
onMounted(() => {
    gethotlist()
})


</script>

<style scoped lang="scss">
.van-search{
    margin-top: 20px;
}
</style>
